import React,{Component} from 'react';

class TodoList extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            thing: '',
            todoThings: [
                '学会React', '熟练使用Php', '学会登录支付流程'
            ],
        }
    }

    thingChange=(e)=>{
        this.setState({
            thing: e.target.value
        });
    }

    addThing=(e)=>{
        let things = this.state.todoThings;
        things.push(this.state.thing);
        this.setState({
            todoThings: things,
            thing: ""
        });
    }

    delThing=(index, e)=>{
        let things = this.state.todoThings;
        things.splice(index,1);
        this.setState({
            todoThings: things
        });
    }

    render() { 
        return ( 
            <div style={{'textAlign': 'center'}}>
                <h2>React TodoList案例</h2>

                <div>
                    <input type="text" value={this.state.thing} onChange={this.thingChange} />
                    <button onClick={this.addThing}>增加+</button>
                </div>

                <div>
                    <p>需要去做的事</p>
                    <ul>
                        {
                            this.state.todoThings.map((val,i)=>{
                                return( <li key={i}>
                                    {val}
                                    <button onClick={this.delThing.bind(this,i)}>删除-</button>
                                </li>)
                            })
                        }
                    </ul>
                </div>

            </div>
        );
    }
}
 
export default TodoList;